<template>
    <div class="common-layout">
        <el-container>

            <!-- 头部  -->
            <el-header>
                <el-row class="row-bg" justify="space-between">
                    <el-col :span="2">
                        <div class="grid-content ep-bg-purple">
                            <el-icon :size="40">
                                <img src="../../img/logos/logo.png" width="40" height="40" alt="">
                            </el-icon>

                        </div>
                    </el-col>
                    <el-col :span="10" style="    display: flex;
    justify-content: center;">
                        <div class="grid-content ep-bg-purple-light items-center flex">


                            <el-input class="search-input" placeholder="搜索你感兴趣的内容" :suffix-icon="Search" />


                        </div>
                    </el-col>
                    <el-col :span="4" style="position: relative;" class="visibleBox">

                        <el-button color="#fe2c55" :icon="User" @click="dialogFormVisible = true">登录</el-button>

                        <el-avatar :size="40" src="/touxiang.jpg" />
                        <div class="myallbox">
                            <ul class="myall">
                                <li @click="toMyCenterPath('#first')">

                                    我的视频


                                </li>

                                <li @click="toMyCenterPath('#second')">
                                    我的房间

                                </li>
                                <li @click="toMyCenterPath('#third')">
                                    创建房间

                                </li>

                            </ul>
                        </div>


                    </el-col>

                </el-row>

            </el-header>

            <!-- 下面内容 -->
            <el-container>
                <!-- 菜单栏 -->
                <el-aside width="160px">
                    <el-menu style="    --el-menu-hover-bg-color: rgba(242, 242, 243,.06);" active-text-color="#fe2c55"
                        background-color="none" class="el-menu-vertical-demo" default-active="1" text-color="FFFFFF80">

                        <el-menu-item index="1" @click="toPath('videolist')">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="toPath('roomlist')">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>

                            <span>推荐</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="toPath('mycollect')">
                            <el-icon>
                                <Star />
                            </el-icon>
                            <span>收藏</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="toPath('mycenter')">
                            <el-icon>
                                <Guide />
                            </el-icon>
                            <span>我的</span>
                        </el-menu-item>
                    </el-menu>

                </el-aside>
                <!-- 内容 -->
                <el-main>
                    <router-view />

                </el-main>
            </el-container>


        </el-container>
    </div>

    <!-- 弹框登录部分 -->
    <el-dialog v-model="dialogFormVisible" width="500" class="login-dialog" style="
          background: rgba(255, 255, 255, 0.3); /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
        <el-form class="login-form">
            <h2> 登陆后一起看</h2>
            <el-form-item>
                <el-input placeholder="请输入您的邮箱" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请确认密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn">登录</el-button>

            </el-form-item>
            <div style=" display: flex; color: white;
    justify-content: space-around;">

                <el-col :span="4">
                    <el-link type="info">忘记密码</el-link>
                </el-col>
                <el-col :span="4">
                    <el-link type="info" @click=" dialogRegFormVisible = true, dialogFormVisible = false">注册</el-link>
                </el-col>

            </div>
        </el-form>


    </el-dialog>

    <!-- 注册部分 -->
    <el-dialog v-model="dialogRegFormVisible" width="500" class="reg-dialog" style="
          background: rgba(255, 255, 255, 0.3); /* 背景颜色和透明度 */
            backdrop-filter: blur(10px); /* 模糊效果，可根据需要调整值 */
              border-radius: 10px; /* 可选：添加圆角 */
       
        ">
        <el-form class="login-form">
            <h2> 注册</h2>
            <el-form-item>
                <el-input placeholder="请输入您的用户名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入您的邮箱" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item style="display: flex;">
                <el-input placeholder="请输入验证码" show-password style="flex:2"></el-input>
                <el-button type="danger" style="flex:1;height: 100%;">获取验证码</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn">注册</el-button>
            </el-form-item>
            <div style=" display: flex; color: white;
    justify-content: start;">

                <el-col> <el-link type="info"
                        @click=" dialogRegFormVisible = false, dialogFormVisible = true">已有帐号，去登陆</el-link></el-col>


            </div>
        </el-form>


    </el-dialog>
</template>
<script setup lang='ts'>
import { Search, User, Guide, House, Star, VideoPlay } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
//   默认登陆弹框关闭
const dialogFormVisible = ref(false)
const dialogRegFormVisible = ref(false)
// 路由跳转
const router = useRouter()
const toPath = (item: string) => {
    console.log(item)
    router.push({ name: item })
}
// 跳转到mycenter
const toMyCenterPath = (item: string) => {
    router.push({ name: "mycenter", hash: item })
}
</script>
<style lang='scss' scoped>
.el-header {
    height: 68px;
    // background-color: rgb(208, 14, 24);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
}


.el-row {
    height: 50px;
    align-items: center;

}

.search-input {
    width: 415px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .7);
    background-color: black;
    border-radius: 12px;
}

::v-deep .search-input .el-input__wrapper {
    background-color: black;
    border-radius: 12px;
    box-shadow: none;
}

.el-menu {
    border: none;
    // color: white;


}


h2 {
    color: rgb(253, 253, 253);
    text-align: center;
}

.login-dialog,
.reg-dialog .login-form .el-input {
    height: 45px;
}

::v-deep .login-dialog,
.reg-dialog .login-form .el-input__wrapper {
    background-color: #f2f2f2;
    color: #555;
}

.login-btn {
    background-color: #fe2c55;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    height: 45px;
}

.login-btn:hover {

    background-color: #1ba4a6;

}

// 下拉信息
.myallbox {
    position: absolute;
    z-index: 1;
    background-color: #e6c9c9;
    left: 82px;
    top: 56px;
    transform: translateX(-100%) translateY(0%);
    border-radius: 4px;
    opacity: 0;

    //    display: none;
    .myall {
        list-style: none;
        padding: 4px 0;
        margin: 0;

        li {
            padding: 8px 16px;
            color: white;
            max-width: 280px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    }
}

.visibleBox:hover .myallbox {
    // background-color: #1d4a67;
    visibility: visible;
    opacity: 1;
    // animation-name: semi-tooltip-bounceIn;
    // animation-duration: 100ms;
    // animation-direction: normal;
    // transform-origin: calc(100% - 41px) 0%;
}

.myallbox ul li:hover {
    background-color: #555;
}
</style>